<!DOCTYPE html>
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>参数配置页面</title>
    <header th:replace="header::html"></header>
    <link th:href="@{/xadmin/lib/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/xadmin/lib/layui/layui.js}" type="text/javascript"></script>
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row  layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <form class="layui-form  layui-col-space5">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="startDate" placeholder="请选择开始日期"
                                       name="startDate">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="endDate" placeholder="请选择结束日期" name="endDate">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select name="parameterType" id="parameterType" class="layui-select" >
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                    <div class="layui-inline" style="width: 1000px">
                        <button class="layui-btn" onclick="add()" style="float: right"><i
                                class="layui-icon">新增参数&#xe654;</i></button>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-hide" id="parameterTable" lay-filter="parameterTable" ></table>
                    </div>
                    <script type="text/html" id="barDemo">
                        {{#  if(d.pid>48){ }}
                            <a class="layui-btn layui-btn-xs" lay-event="modify" >修改</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                        {{#  }else{ }}
                            <i>系统内置参数</i>
                        {{#  } }}

                    </script>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="parameterFrame">
        <div style="padding:50px;font-size: 15px">
            <div>参数类型：<i id="tt" style="color: red;font-size: 12px"></i><textarea name="titles" id="titles" cols="50" rows="1" style="resize: none;font-size: 20px;border-radius: 5px" onblur="rcverify(0)"></textarea></div><br>
            <div>参数值：<i id="cc" style="color: red;font-size: 12px"></i><textarea name="contents" id="contents" cols="50" rows="1" style="resize: none;font-size: 20px;border-radius: 5px" onblur="rcverify(1)"></textarea></div><br>
            <div style="float: right"><button class="layui-btn layui-btn-xs layui-btn-radius" onclick="addparameter()">确定新增</button></div>
        </div>
    </script>
</body>
<script>

    var verify1=0;
    var verify2=0;
    var verify3=0;
    var verify4=0;
    var backTitle;
    var backContent;
    var opAdd;
    var opUpdata;
    var pid;

    layui.use('laydate', function () {
	    var laydate = layui.laydate;
	    //选中后的回调
	    laydate.render({
		    elem: '#startDate'
		    , done: function (value, date) {
			    // layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
		    }
	    });

	    laydate.render({
		    elem: '#endDate'
		    , done: function (value, date) {
			    // layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
		    }
	    });
    });

    layui.use('layer',function () {
       var layer=layui.layer;
	    $.ajax({
		    type: "get",
		    url: '/api-back/parameter/searchType',
		    data: {},
		    success: function (msg) {
			    $("#parameterType").empty();
			    if (msg.length >0 ) {
				    $("#parameterType").append(new Option("---请选择参数类型---", ""));
				    $.each(msg, function (index, item) {
					    $('#parameterType').append(new Option(item, item));

				    });
			    } else {
				    $("#parameterType").append(new Option("暂无数据", ""));
			    }
			    layui.form.render("select");
		    },
		    error: function (msg) {
			    layer.msg("连接服务器超时，请稍后重试", {icon: 2})
		    }
	    })
    });

	layui.use('table', function () {
		var table = layui.table,
			form = layui.form;
		table.render({
			elem: '#parameterTable'
			, url: '/api-back/parameter/searchParameter' //数据接口
			, page: true //开启分页
			, cellMinWidth: 80 //全局定义常规单元格的最小宽度
			, limits: [10, 20]
			, limit: 10
			, response: {
				dataName: 'datas' //规定数据列表的字段名称，默认：data
			}
			, cols: [
				[
					{type: 'numbers', align: 'center', title: '序号'}
					, {field: 'pid', align: 'center',width: '10%', title: '参数id'}
					, {field: 'ptype', title: '参数类型', width: '25%', align: 'center'}
					, {field: 'pname', align: 'center', width: '30%', title: '参数值'}
					, {field: 'ptime', align: 'center', width: '15%', title: '配置时间'}
					, {fixed: 'right', title: '操作', align: 'center', width: '15%', toolbar: '#barDemo'}
				]
			],
			done: function () {
				//checkPermission();
			}

		});
		//监听行工具事件
		table.on('tool(parameterTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data,//获得当前行数据
				layEvent = obj.event; //获得 lay-event 对应的值
			backTitle = data.ptype;
			backContent = data.pname;
			pid = data.pid;
			if (layEvent === 'delete') {
				layer.confirm('确定要删除该条参数吗？删除后不可恢复', function (index) {
					$.ajax({
						type: "post",
						url: '/api-back/parameter/parameterDelete',
						data: {"pid": pid},
						success: function (msg) {
							if (msg === "success") {
								layer.msg("删除成功", {icon: 1});
								$(".layui-laypage-btn")[0].click();
							} else {
								layer.msg("删除失败，请重试", {icon: 2})
							}
						},
						error: function (msg) {
							layer.open({
								type:2,
								content: "/404.html",
								area:['1000px','600px'],
								title:'权限不允许进行访问'
							})
						}
					})
				})
			} else if (layEvent === 'modify') {
				opUpdata = layer.open({
					type: 1 //Page层类型
					, area: ['600px', '400px']
					, title: '参数修改'
					, shade: 0.3 //遮罩透明度
					, anim: 1 //0-6的动画形式，-1不开启
					, content: '<div style="padding:50px;font-size: 15px">\n' +
						'            <div>参数类型：<i id="ttu" style="color: red;font-size: 12px"></i><textarea name="titleu" id="titleu" cols="50" rows="1" style="resize: none;font-size: 20px;border-radius: 5px" onblur="rcverify(2)">' + backTitle + '</textarea></div><br>\n' +
						'            <div>参数值：<i id="ccu" style="color: red;font-size: 12px"></i><textarea name="contentu" id="contentu" cols="50" rows="3" style="resize: none;font-size: 20px;border-radius: 5px" onblur="rcverify(3)">' + backContent + '</textarea></div><br>\n' +
						'            <div style="float: right"><button class="layui-btn layui-btn-xs layui-btn-radius" onclick="updataParameter()">提交修改</button></div>\n' +
						'        </div>'
				});
			}
		});

		//搜索
		form.on('submit(search)', function (data) {
			var field = data.field;
			if (dateCompare(field.startDate, field.endDate)) {
				table.render({
					elem: '#parameterTable'
					, url: '/api-back/parameter/searchParameter' //数据接口
					, page: true //开启分页
					, limits:[10,20]
					, limit:10
					, where: {
						"parameterType": field.parameterType,
						"starttime": field.startDate,
						"endtime": field.endDate,
					}
					, response: {
						dataName: 'datas' //规定数据列表的字段名称，默认：data
					}
					, cols: [
						[
							{type: 'numbers', align: 'center', title: '序号'}
							, {field: 'pid', align: 'center', width: '10%',title: '参数id'}
							, {field: 'ptype', title: '参数类型', width: '25%', align: 'center'}
							, {field: 'pname', align: 'center', width: '30%', title: '参数值'}
							, {field: 'ptime', align: 'center', width: '15%', title: '配置时间'}
							, {fixed: 'right', title: '操作', align: 'center', width: '15%', toolbar: '#barDemo'}
						]
					]
				});
			} else {
				layer.msg("您的日期不正确，请重新输入！",{icon:2});
			}
			return false;
		});
	});


	function add(){
		opAdd=layer.open({
			type: 1 //Page层类型
			,area: ['600px', '400px']
			,title: '新增参数配置'
			,shade: 0.3 //遮罩透明度
			,anim: 1 //0-6的动画形式，-1不开启
			,content:$("#parameterFrame").html()
		});
	}

	function addparameter() {
		rcverify(0);
		rcverify(1);
		var titles=$("#titles").val();
		titles=titles.replace(/^\s+|\s+$/g,"");
		var contents=$("#contents").val();
		contents=contents.replace(/^\s+|\s+$/g,"");
		if (verify1 === 1 || verify2 === 1) {
			layer.msg("新增输入长度不合法", {icon: 2});
		} else {
			$.ajax({
				type:"post",
				url:'/api-back/parameter/parameterAdd',
				data:{"ptype":titles,"pname":contents},
				success:function (msg) {
					if (msg === "success") {
						layer.msg("添加成功",{icon:1});
						$(".layui-laypage-btn")[0].click();
						layer.close(opAdd);
					} else {
						layer.msg("该条参数类型已有相同的参数值，请重新输入",{icon:2});
						document.getElementById("cc").innerText ="该条参数类型已有相同的参数值"
					}
				},
				error:function (msg) {
					layer.open({
						type:2,
						content: "/404.html",
						area:['1000px','600px'],
						title:'权限不允许进行访问'
					})
				}
			})
		}
	}

    function dateCompare(startDate, endDate) {
	    var oDate1 = new Date(startDate);
	    var oDate2 = new Date(endDate);
	    if (oDate1 > oDate2) {
		    return false;
	    } else {
		    return true;
	    }
    }

    function updataParameter() {
	    rcverify(2);
	    rcverify(3);
	    var titleu=$("#titleu").val();
	    titleu=titleu.replace(/^\s+|\s+$/g,"");
	    var contentu=$("#contentu").val();
	    contentu=contentu.replace(/^\s+|\s+$/g,"");
	    if (verify3 === 1 || verify4 === 1) {
		    layer.msg("输入长度不合法", {icon: 2});
	    } else if (titleu===backTitle&&contentu===backContent) {
		    layer.msg("您未对参数类型和参数值进行更改，不会为您提交至数据库", {icon: 2});
		    layer.close(opUpdata);
	    } else {
		    $.ajax({
			    type: "post",
			    url: '/api-back/parameter/parameterUpdata',
			    data: {"pid":pid,"ptype": titleu, "pname": contentu},
			    success: function (msg) {
				    if (msg === "success") {
					    layer.msg("修改成功", {icon: 1});
					    $(".layui-laypage-btn")[0].click();
					    layer.close(opUpdata);
				    } else if (msg==="not") {
					    layer.msg("网络加载较慢，请重新操作", {icon: 2});
				    } else {
					    layer.msg("该条参数类型已有相同的参数值，请重新输入", {icon: 2});
					    document.getElementById("ccu").innerText = "该条参数类型已有相同的参数值，请重新输入";
				    }
			    },
			    error: function (msg) {
				    layer.open({
					    type:2,
					    content: "/404.html",
					    area:['1000px','600px'],
					    title:'权限不允许进行访问'
				    })
			    }
		    });
	    }
    }

	function rcverify(msg) {
		if (msg === 0) {
			var titles=$("#titles").val();
			titles=titles.replace(/^\s+|\s+$/g,"");
			if (titles.length >= 30||titles.length === 0) {
				document.getElementById("tt").innerText = "参数类型长度规定1-30个字符，当前长度：" + titles.length;
			    verify1=1;
			} else {
				document.getElementById("tt").innerText ="";
                verify1=0;
			}
		} else if(msg === 1) {
			var contents=$("#contents").val();
			contents=contents.replace(/^\s+|\s+$/g,"");
			if (contents.length>=100||contents.length === 0) {
				document.getElementById("cc").innerText="参数值规定1-100个字符，当前长度："+contents.length;
			    verify2=1;
			} else {
				document.getElementById("cc").innerText ="";
                verify2=0;
			}
		} else if (msg === 2) {
			var titleu=$("#titleu").val();
			titleu=titleu.replace(/^\s+|\s+$/g,"");
			if (titleu.length >= 30||titleu.length === 0) {
				document.getElementById("ttu").innerText = "参数类型长度规定1-30个字符，当前长度：" + titleu.length;
				verify3=1;
			} else {
				document.getElementById("ttu").innerText ="";
				verify3=0;
			}
		} else if(msg === 3) {
			var contentu=$("#contentu").val();
			contentu=contentu.replace(/^\s+|\s+$/g,"");
			if (contentu.length>=100||contentu.length === 0) {
				document.getElementById("ccu").innerText="参数值规定1-100个字符，当前长度："+contentu.length;
				verify4=1;
			} else {
				document.getElementById("ccu").innerText ="";
				verify4=0;
			}
		}

	}
</script>
</html>